<template>
  <div id="reg_layout" class="reg_layout">
    <div id="" class="reg_box">
      <div class="reg_box_row">
        <div class="reg_badge">
          <h1 >注册账号</h1>
        </div>
        <form>
          <div class="reg-input-container"><input v-model="value" placeholder="电子邮箱..." class="reg-input" /></div>
          <div class="reg-input-container"><input v-model="value" placeholder="手机号..." class="reg-input" /></div>
          <div class="reg-input-container"><input v-model="value" placeholder="密码..." class="reg-input" /></div>
          <div class="reg-input-container"><input v-model="value" placeholder="确认密码..." class="reg-input" /></div>
          <!--div class="reg-input-container">我是：
            <Radio-group v-model="phone">
              <Radio label="boat">
                <Icon type="android-boat"></Icon>
                <span>Apple</span>
              </Radio>
              <Radio label="android">
                <Icon type="android-boat"></Icon>
                <span>Android</span>
              </Radio>
              <Radio label="windows">
                <Icon type="social-windows"></Icon>
                <span>Windows</span>
              </Radio>
            </Radio-group>
          </div-->
          <div class="reg-input-container"><Button @click="regDone">注册</Button>  &nbsp;&nbsp; 点击查看&nbsp;<a>服务条款声明</a></div>

        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    name: 'register-panel',
    data: function () {
      return {}
    },
    methods: {
      regDone () {
        this.$router.push('/')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .reg_layout {
    display: flex;
    display: -webkit-flex; /* safari */
    flex-direction: row;
    justify-content: center;
    background: #f5f7f9;
    align-items: center;
    height: 100%;
  }

  .reg_box {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    width: 50%;
    display: block;
    min-height: 500px;
    background: #fff;
    border-radius: 5px;
  }

  .reg_box_row {
    margin-bottom: 16px;
    margin-top: 16px;
    flex-direction: row;
    justify-content: center;
  }

  .reg_badge h1 {
    background-image: url("../../assets/uyachter-icon.png");
    background-size: 26px 26px;
    background-position: center top 15px;
    background-repeat: no-repeat;
    color: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    letter-spacing: 3px;
    margin-top: 0;
    padding: 40px 10px 40px;
    text-transform: uppercase;
    text-align: center;
  }

  .reg-input-container {
    margin: 48px 10px 10px 10px;
    padding: 2px;
    position: relative;
  }

  .reg-input-container .reg-input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 1px;
    box-sizing: border-box;
    display: block;
    float: left;
    height: 30px;
    line-height: 26px;
    margin-top: 0;
    order: 2;
    padding: 2px 2px 1px;
    width: 100%;
  }
</style>
